<%@ page language="java"  pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="base" value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}" />
<c:set var="ctx" value="${base}" />
<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<!-- 引入layui -->
	<link rel="stylesheet" media="all" type="text/css" href="${ctx }/static/layui2.2.3/css/layui.css"/>
<style type="text/css">
body{overflow:hidden;}

.video-player{background-color: transparent;display: block;position: absolute;z-index: 1;top:0;}
.video_mask{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:90; background-color:rgba(0,0,0,0.5); }
.login{ height:260px;width:260px;padding: 20px;background-color:rgba(0,0,0,0.5);border-radius: 4px;position:absolute;left: 50%;top: 50%; margin:-150px 0 0 -150px;z-index:99;}
.login h1{ text-align:center; color:#fff; font-size:24px; margin-bottom:20px; }
.form_code{ position:relative; }
.form_code .code{ position:absolute; right:0; top:1px; cursor:pointer; }
.login_btn{ width:100%; }
</style>
</head>
<body>
<!-- 	<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920"> -->
<!-- 	    <source src="login.mp4" type="video/mp4"> -->
<!-- 	</video> -->
	<div class="video_mask"></div>
	<div class="login">
	    <h1>layui后台管理登录</h1>
	    <form class="layui-form">
	    	<div class="layui-form-item">
				<input class="layui-input" name="username" value="admin" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
		    </div>
		    <div class="layui-form-item">
				<input class="layui-input" name="password" value="1" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
		    </div>
		    <!-- 
		    <div class="layui-form-item form_code">
				<input class="layui-input" name="code" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
				<div class="code"><img src="../../images/code.jpg" width="116" height="36"></div>
		    </div>
		     -->
			<button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
		</form>
	</div>
</body>
<%@ include file="/common-js.jsp" %>
<script type="text/javascript">
layui.use(['form','layer'],function(){
	var form = layui.form,
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		$ = layui.jquery;
// 	video背景
// 	$(window).resize(function(){
// 		if($(".video-player").width() > $(window).width()){
// 			$(".video-player").css({"height":$(window).height(),"width":"auto","left":-($(".video-player").width()-$(window).width())/2});
// 		}else{
// 			$(".video-player").css({"width":$(window).width(),"height":"auto","left":-($(".video-player").width()-$(window).width())/2});
// 		}
// 	}).resize();
	
	//登录按钮事件
	form.on("submit(login)",function(data){
// 		console.log(data.elem); //被执行事件的元素DOM对象，一般为button对象
// 	  	console.log(data.form); //被执行提交的form对象，一般在存在form标签时才会返回
// 	  	console.info(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
// 	  	return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  		
  		$.post('${ctx}/login',data.field,function(result){
  			result = $.parseJSON(result);
  			if (result.success) {
                window.location.href = '${ctx}/layui/index';
            }else{
            	layer.msg(result.msg);
            }
  		});
		return false;
	});
});
</script>
</html>